<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="res/js/jquery.js" type="text/javascript"></script>
    <script src="res/js/jquery.touchwipe.1.1.1.js" type="text/javascript"></script>
</head>
<body>
<div id="imagegallery" style="border: 1px solid rgb(102, 102, 102); width: 400px; height: 300px; margin-top: 10px; margin-bottom: 10px; position: relative; overflow: hidden;">
    <img title="Orange Blumen" src="res/images/garden_i400x300.jpg" alt="Orange Blumen" width="400" height="300" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1;">
    <img style="display: none; position: absolute; top: 0px; left: 0px; z-index: 2;" title="Ein fließender Wasserfall, umrahmt von Blumen." src="res/images/waterfall_i400x300.jpg" alt="Ein fließender Wasserfall, umrahmt von Blumen." width="400" height="300">
    <img style="display: none; position: absolute; top: 0px; left: 0px; z-index: 1;" title="Ahornblätter im Herbst." src="res/images/autumn-leaves_i400x300.jpg" alt="Ahornblätter im Herbst." width="400" height="300">
</div>

</body>

<script>
    $("#imagegallery").touchwipe({
        wipeLeft: function() {
            //alert("left");
            var curImg;
            $("img",$("#imagegallery")).each(function(){
               if($(this).css("display")!="none"){
                   curImg = $(this).get(0);
               }
            });
            $(curImg).css("display","none");
            $(curImg).next().css("display","");








        },
        wipeRight: function() {
            alert("right");
        },
        wipeUp: function() { alert("up"); },
        wipeDown: function() { alert("down"); },
        min_move_x: 20,
        min_move_y: 20,
        preventDefaultEvents: true
    });

</script>
</html>